<template>
  <div class="boxAll" v-swipeup="swipeup">
    <div class="box">
      <img src="../assets/img/timg.jpg" ref='box' v-swipedown="swipedown" v-for="(item,index) in boxList" :key="index">
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      boxList: [],
      num: 0
    };
  },
  mounted() {
    this.getBoxList();
  },
  methods: {
    getBoxList() {
      // console.log(this)
      for (let i = 0; i < 10; i++) {
        this.boxList.push(this.z);
      }
    },
    tap(e) {
      console.log("触摸点击");
    },
    swipedown(e) {

    },
    swipeup(e) {
      this.$refs.box[this.num].classList.add("ani");
      this.num++;
      this.boxList.push("1");
    },
    press(e) {
      console.log("长按");
    }
  }
};
</script>
<style>
@media (min-width: 750px) {
  #mobile {
    margin: 0 auto;
  }
}
.ani {
  animation: goTop 1s forwards;
  z-index: 999;
}
@keyframes goTop {
  0% {
    top: 0px;
    opacity: 1;
  }
  1% {
  }
  10% {
    top: -200px;
    /* opacity: 0.7; */
  }
  50% {
    top: -900px;
    /* opacity: 0.5; */
  }
  100% {
    top: -1500px;
    /* opacity: 0; */
  }
}
#mobile {
  max-width: 750px;
  height: 100%;
}
h1 {
  font-size: 0.9rem;
}
.box {
  width: 100%;
  /* height: 300px; */
  top: 300px;
  /* background: url(../assets/img/timg.jpg); */
  position: absolute;
  text-align: center;
}
.box img {
  width: 70%;
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -35%;
}
.boxAll {
  height: 100vh;
}
</style>
